import {
  UserOutlined,
  FieldBinaryOutlined,
  LockOutlined,
} from '@ant-design/icons';
import {
  message,
  Tabs,
  Space,
  Progress,
  Table,
  Tag,
  Button,
  Select,
  Modal,
  Input,
  Form
} from 'antd';
import { useState, useEffect, memo } from 'react';
import React from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import { connect } from 'dva';
import {
  useIntl,
  Link,
  history,
  FormattedMessage,
  SelectLang,
  useModel,
} from 'umi';
import qs from 'qs';
import styles from './index.less';


const itemStyle = {
  margin: ' 0 0.5rem 0.6rem' 
}

const formLayout = {
  labelCol: { xs: 4, sn: 4 },
  wrapperCol: { xs: 24, sm: 20 }
}
const { Option } = Select;
const CollectionCreateForm = memo(({ props, visible, onCreate, onCancel, record }) => { //子组件   展开弹窗
  const [form] = Form.useForm();
  form.setFieldsValue(record)
  const {categoryList} = props.vehicle
  const onOK = () => {
    form
    .validateFields()
    .then((values) => {
      //请求
      console.log(values);
    })
    .catch(( info ) => {
      
    });
  }
  return(
    <Modal
      title = '添加车辆'
      onCancel = {onCancel}
      onOk = {onCreate}
      visible = {visible}
      onOk = {onOK}
    >
        <Form 
          {...formLayout}
          // initialValues={records} 默认值，动态值用setFieldsValue
          form={form}
        >
          <Form.Item name='categoryId' label='汽车类型' rules={[
            {required: true, message: '请选择汽车类型'}
          ]}>
            <Select>
              {
                categoryList.map(item => <Select.Option key={item.categoryId} value={item.categoryId}>{item.categoryName}</Select.Option>)
              }
            </Select>
          </Form.Item>
          <Form.Item name='licensePlateNumber' label='车牌号' rules={[
            {required: true, message: '请输入车牌号'}
          ]}><Input /></Form.Item>
          <Form.Item name='mileage' label='总里程数' rules={[
            {required: true, message: '请输入总里程数'}
          ]}><Input /></Form.Item>
        </Form>
    </Modal>
  )
})


class VehicleMessage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      needDatas: [],
      vehicleId: null,
      visible: false,
    };
    this.changeTypes = this.changeTypesL.bind(this);
    this.changeTypes = this.changeTypesR.bind(this);
    this.upLoadLoState = this.upLoadLoState.bind(this);
    this.upLoadRuState = this.upLoadRuState.bind(this);
  }
  upLoadLoState(record, value) {
    // this.setState({vehicleId:params})
    console.log(this.props);
    this.props.dispatch({
      type: 'vehicle/reqUpdateLockState',
      payload: {
        lockedState: value,
        vehicleId: record.vehicleId,
      },
    });
  }
  upLoadRuState(record, value) {
    console.log(value);
    // this.setState({vehicleId:params})
    this.props.dispatch({
      type: 'vehicle/reqUpdateRunningState',
      payload: {
        runningState: value,
        vehicleId: record.vehicleId,
      },
    });
  }
  changeTypesL(type) {
    switch (type) {
      case 0:
        return '未锁机';
      case 1:
        return '锁机';
    }
  }
  changeTypesR(type) {
    switch (type) {
      case 0:
        return '未运行';
      case 1:
        return '熄火';
      case 2:
        return '运行中';
    }
  }
  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'vehicle/getVmessage',
      payload: null,
    });
    dispatch({
      type: 'vehicle/reqGetCategoryList',
    })
    // setTimeout(()=>{
    //   const props = this.props
    //   console.log(props)
    //   props.vehicle.mewVeDatas.map((item,index)=>{
    //     console.log(item)
    //     const temValue = {
    //       categoryId: item.categoryId,
    //       createTime: item.createTime,
    //       licensePlateNumber: item.licensePlateNumber,
    //       lockedState: this.changeTypesL(item.lockedState),
    //       mileage: item.mileage,
    //       runningState: this.changeTypesR(item.runningState),
    //       userId: item.userId,
    //       vehicleId: item.vehicleId,
    //     }
    //     this.setState({needDatas:[...this.state.needDatas,temValue]})
    //     })
    // },100)
  }
  onCreate = () => {
    this.hiddenModal();
  }
  hiddenModal = () => {
    this.setState({
      visible: false
    })
  }

  add = () => [
    this.setState({
      visible: true,
    })
  ]
  render() {
    const columns = [
      {
        title: '车辆ID',
        dataIndex: 'vehicleId',
        key: 'vehicleId',
        render: (text) => <a>{text}</a>,
      },
      {
        title: '用户ID',
        dataIndex: 'userId',
        key: 'userId',
      },
      {
        title: '车牌号',
        dataIndex: 'licensePlateNumber',
        key: 'licensePlateNumber',
      },
      {
        title: '分类编号',
        dataIndex: 'categoryId',
        key: 'categoryId',
      },
      {
        title: '里程数',
        dataIndex: 'mileage',
        key: 'mileage',
      },
      {
        title: '创建时间',
        dataIndex: 'createTime',
        key: 'createTime',
        render: (text) => <span>{text.slice(0, 10)}</span>,
      },
      {
        title: '运行状态',
        dataIndex: 'runningState',
        key: 'runningState',
        render: (text) => <a>{this.changeTypesR(text)}</a>,
      },
      {
        title: '锁机状态',
        dataIndex: 'lockedState',
        key: 'lockedState',
        render: (text) => <a>{this.changeTypesL(text)}</a>,
      },
      {
        title: '操作',
        key: 'action',
        render: (text, record) => (
          <Space size="middle">
            <Select
              defaultValue={record.lockedState}
              onChange={this.upLoadLoState.bind(this, record)}
            >
              <Option value={1}>锁机</Option>
              <Option value={0}>未锁机</Option>
            </Select>
            <Select
              defaultValue={record.runningState}
              onChange={this.upLoadRuState.bind(this, record)}
            >
              <Option value={0}>未运行</Option>
              <Option value={1}>熄火</Option>
              <Option value={2}>运行中</Option>
            </Select>
            {record.runningState === 2 && <Link to={"/vehicle/" + record.vehicleId }>查看实时数据</Link>}
          </Space>
        ),
      },
    ];
    return (
      <PageContainer>
        <Button type="primary" style={{ marginBottom: '10px' }} onClick={this.add}>添加车辆</Button>
        <Table dataSource={this.props.vehicle.newVeDatas} columns={columns} />
        <CollectionCreateForm props={this.props} visible={this.state.visible} onCreate={this.onCreate} onCancel={this.hiddenModal} />
      </PageContainer>
    );
  }
}

export default connect(({ login, vehicle }) => ({ login, vehicle }))(
  VehicleMessage,
);
